<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    /* 继承性，如果子元素有自己样式，父元素的样式会被覆盖 */
    /* 层叠性  1、覆盖，相同的属性，会被后面的样式覆盖，2、叠加，不同的都生效 */
    /* 优先级 公式：通配符选择器 < 标签选择器 < 类选择器 < ID选择器 < 行内样式 < !important  标签范围越大，优先级越低 */

    /* 通配符选择器 */
    /* !important  提权功能*/
    * {
      color: black !important;
    }

    /* 后代选择器 */
    div p {
      color: blue;
    }
    /* 子代选择器 */
    div > p {
      color: red;
    }
    /* 并级选择器 */
    div,
    p {
      color: green;
    }
    /*交集选择器 既是p标签又有red类*/
    p.red {
      color: purple;
    }
    /* 伪类选择器 元素状态 超链接四个状态:
       a:link, a:visited, a:hover, a:active */
    p:hover {
      color: orange;
    }

    /* 复合选择器优先级
       行内样式、ID选择器个数【#】 、 类选择器个数 【.】、标签选择器个数
     */
  </style>
  <body>
    <!--  emmet 直接 .className，直接 #idName -->

    <!-- 显示模式 -->
    <!-- 块级元素：div、p、h1-h6、ul、ol、li、table、form  属性display可以进行修改类型
     行内元素：span、a、img、input、button、label、select、textarea 尺寸由内容决定
     行内块元素：inline-block，元素本身是行内元素，但是可以设置宽高 如图片，默认图片大小 -->
  </body>
</html>
